<template>
  <CommonPanel title="今日巡更新情况">
    <div class="content-box">
      <div class="content-box_item" v-for="i in list" :key="i.name">
        <img :src="i.icon" alt="">
        <div class="value-box">{{ i.val }}</div>
        <div class="text-box">{{ i.name }}</div>
      </div>

    </div>
  </CommonPanel>
</template>

<script setup>
import icon1 from "@/assets/icon-image/icon_top_01@2x.png";
import icon2 from "@/assets/icon-image/icon_top_02@2x.png";
import icon3 from "@/assets/icon-image/icon_top_03@2x.png";
import { computed, ref, onMounted, watch, reactive } from "vue";
const list = ref([
  { name: '已询数量', icon: icon1, val: 111 },
  { name: '未询数量', icon: icon2, val: 23 },
  { name: '异常数量', icon: icon3, val: 32 },
]);

</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;

  &_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 100px;
    }

    .value-box {
      font-size: 24px;
      color: #fff;
      font-weight: 600;
    }

    .text-box {
      margin-top: 5px;
      font-size: 16px;
      color: #fff;
    }
  }

  &>div {
    flex: 1;
  }
}
</style>
